<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <meta charset="utf-8"/>
    <title>找回密码</title>
    <link rel="stylesheet" href="<%=path %>/web/static/css/common.css"/>
    <link rel="stylesheet" href="<%=path %>/web/static/css/forget_passwd.css"/>
    <link rel="stylesheet" href="<%=path %>/web/static/layui/css/layui.css">
</head>
<body>
<header id="header" class="">
    <div class="common-width">

        <section class="clearfix">
            <h1 class="logo" title="等你回家">
                <a href="<%=path %>/index."></a>
            </h1>
            <span class="page-name"> | 找回密码</span>
        </section>
    </div>
</header>

<section class="main">
    <div class="common-width">

        <div class="main-inner">
            <div class="passwd-nav-box">
                <ol class="passwd-nav">
                    <li class="first done">
                        <span><i>1</i><em>身份验证</em></span>
                    </li>
                    <li class="middle ">
                        <span><i>2</i><em>重设登录密码</em></span>
                    </li>
                    <li class="last ">
                        <span><i>3</i><em>完成</em></span>
                    </li>
                </ol>
            </div>

            <form id="form">
                <div class="fill-data-box" id="phoneStep">
                    <div class="fill-data">
                        <div class="title">手机号码：</div>
                        <div class="form-group w275">
                            <input type="text" maxlength="11" id="phone" name="phone" class="form-text" placeholder="输入您注册的手机号码"/>
                        </div>
                        <%String err = request.getParameter("err");
                            if(err!=null&&err.equals("1")){
                        %>
                        <div class="form-error-message">手机号或验证码错误</div>
                        <%}%>
                        <div class="captcha-wrap">
                            <div class="captcha-box" id="captchaBox" style="margin-left: -300px">
                                <div class="captcha-item">
                                    <div class="form-group captcha clearfix">
                                        <input type="text" id="captcha2" name="captcha2"  class="form-text" placeholder="短信验证码"/>
                                        <input type="button" id="getCaptcha" class="captcha-btn" value="获取短信验证码"/>
                                    </div>
                                </div>
                                <div class="captcha-item">
                                    <div class="form-group captcha clearfix">
                                        <input type="text" id="msg-code" maxlength="6" class="form-text" placeholder="短信验证码"/>
                                        <span class="code" style="float: left">
                                            <a id="msg-btn" class="layui-btn layui-btn-normal tel-btn" style="width: 120px;height:40px">获取验证码</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="form-btn" id="phoneNextStep">下一步</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>

    </div>
</section>
<footer id="footer1">
    <div class="footer-first gray">
        <div class="company-info clearfix fs14 gray">
            <a href="about.html" target="_blank"  rel="nofollow">关于我们</a>
            <a href="help.html" target="_blank"  rel="nofollow">帮助中心</a>
            <a href="javascript:;" target="_blank"  rel="nofollow">法律声明</a>
            <a href="jobs.html" target="_blank"  rel="nofollow">人才招聘</a>
            <a href="contact.html" target="_blank"  rel="nofollow">联系我们</a>
            <a href="javascript:;" user-feedback ng-click="userFeedback=true" class="last" rel="nofollow">意见反馈</a>
            <a href="javascript:;" class="last" target="_blank" style="display:none">上海餐厅导航</a>
        </div>
    </div>
    <div class="footer-last">
        <a target="_blank" class="foot-logo-1 base-logo" href="<%=path %>/index"></a>
        <div class="tc fs14 light-gray mb10">
            ©2019 Qingdao wanma school - 鲁ICP备11019908号
        </div>
    </div>
</footer>
<script type="text/javascript" src="<%=path %>/web/index/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/web/static/layui/layui.all.js" charset="UTF-8"></script>
</body>
</html>
<script>
    $(function(){

        var phone_status;
        function checkPhone(){
            if(!/^1[34578]\d{9}$/.test($("#phone").val())){
                phone_status = 0;
            }else{
               phone_status = 1;
            }
        }
        // 发送短信验证码
        var InterValObj; // 定时器变量
        var count = 60; // 间隔函数，1秒执行
        var curCount; // 当前剩余秒数
        var msg_send_count = 0;
        // 发送验证码
        $("#msg-btn").on("click", function() {

            if($(this).prop("disabled") != "disabled") {

                if(!/^1[34578]\d{9}$/.test($("#phone").val())) {
                    layer.msg("请先输入正确的手机号", {
                        icon: 5
                    });
                    return false;
                }else{

                    $.ajax({
                        url: "/GoHome/web/userinfo/checkPhone",
                        type: "get",
                        async: false,
                        data: {
                            "phoneNum": $("#phone").val()
                        },
                        success: function(result) {
                            if(result=="true"){
                                phone_status = 1;
                                msg_send_count++;
                                curCount = count;
                                // 设置button效果，开始计时
                                $("#msg-btn").addClass("layui-btn-disabled");
                                $("#msg-btn").prop("disabled", "disabled"); // 设置按钮为禁用状态
                                $("#msg-btn").text("正在发送..."); // 更改按钮文字
                                // 向后台发送处理数据
                                $.ajax({
                                    url: "/GoHome/web/userinfo/sendCode",
                                    type: "get",
                                    data: {
                                        "phone": $("#phone").val(),
                                        "edit":"edit"
                                    },
                                    success: function(result) {
                                        if(result=="true") {
                                            $("#msg-btn").text(curCount + "秒后再次获取"); // 更改按钮文字
                                            InterValObj = setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
                                        } else {

                                            layer.msg("发送失败",{icon: 5},function(){
                                                $("#msg-btn").text("重新发送验证码");
                                                $("#msg-btn").removeClass("layui-btn-disabled");
                                                $("#msg-btn").removeAttr("disabled"); // 移除禁用状态改为可用
                                            });
                                        }
                                    }
                                });
                            }else{
                                phone_status = 0;
                                layer.msg("此用户没有注册", {
                                    icon: 5
                                });
                                return;
                            }
                        }
                    })
                }
                }

            })


        // timer处理函数
        function SetRemainTime() {
            if(curCount == 0) {
                clearInterval(InterValObj); // 停止计时器
                $("#msg-btn").removeClass("layui-btn-disabled");
                $("#msg-btn").removeAttr("disabled"); // 移除禁用状态改为可用
                $("#msg-btn").text("重新发送验证码");
            } else {
                curCount--;
                $("#msg-btn").text(curCount + "秒后再次获取");
            }
        }

        $("#form").submit(function() {
            checkPhone();
            if(phone_status == 0) {
                layer.msg("请先输入正确的手机号", {
                    icon: 5
                });
            } else if(msg_send_count == 0) {
                layer.msg("请点击获取验证码",{
                    icon:5
                });
            } else {
                $.ajax({
                    url: "/GoHome/web/userinfo/checkCode",
                    type: "get",
                    async: false,
                    data: {
                        "code": $("#msg-code").val()
                    },
                    success: function(result) {
                        if(result=="false") {
                            layer.msg("验证码错误",{icon:5});
                            return false;
                        } else {
                            setTimeout("location='/GoHome/web/userinfo/resetPassword?phone='+$(\"#phone\").val()", 1000);
                        }
                    }
                });
            }

            return false;
        });

    })
</script>